<template>
	<uni-popup ref="popup" type="bottom" @change="popChange" :safe-area="false">
		<view class="sx-address-picker">
			<view class="sx-address-picker__close ">
				<uni-icons class="absolute" size="20" color="#ccc" type="closeempty"
					@click.native="$refs.popup.close"></uni-icons>
			</view>
			<view class="sx-address-picker__title">
				请选择所在地区
			</view>
			<!-- 已选择区域 -->
			<u-steps :current="activeLevel+1" direction="column" class="px-2">
				<u-steps-item v-for="(item,index) in activeItems" :key="index">
					<view class="flex justify-between" :class="(activeLevel === item.level-1 || !item.name || world ==1) ? 'sx-address-picker__select--active':''"  @click="selectLevel(item)">
						<view>{{item.name ||selectTitle}}</view>
						<u-icon name="arrow-right" :color="(activeLevel === item.level-1 || !item.name || world ==1)?'#409EFF':''"></u-icon>
					</view>
				</u-steps-item>
			</u-steps>
			<view class="sx-address-picker--divider"></view>
			<view class="sx-address-picker__list">
				<template v-if="activeLevel ===-1">
					<!-- 中国/海外切换 -->
					<!-- <radio-group class="sx-address-picker__list-tab" @change="typeChange">
						<label v-for="(item,index) in worlds" :key="item"
							:class="world == index? 'sx-address-picker__list-tab--active':''">
							<radio class="sx-address-picker__list-tab--hide" :checked="world === item"
								:value="index + ''" /><text>{{item}}</text>
						</label>
					</radio-group> -->
					<!-- 后续计划TODO 常用城市 -->
					<!-- <view class="font-5 font-weight-500 mb-4">
						{{quickTitle}}
					</view>
					<radio-group class="flex flex-wrap" @change="quickIndex = $event.detail.value">
						<label class="mr-3" v-for="(item,index) in quickList" :key="item"
							:class="world == index? 'active':''">
							<radio class="none" :checked="world === item" :value="index + ''" />
							<view class="radius bg-445 px-4 py-1 mb-3">{{item}}</view>
						</label>
					</radio-group> -->
				</template>
				<view class="sx-address-picker__list-title sticky top-0 z-10 bg-white p-2 flex items-center">
					<view class="mr-2">{{selectTitle}}</view>
					<u-search placeholder="请输入关键词" v-model="keyword" @change="changeSearch"></u-search>
				</view>
				<view class="sx-address-picker__list-content" @click="reGetList">
					<uni-load-more v-if="loadingStatus !== 'more'" :status="loadingStatus"
						:content-text="{contentnomore:'加载失败，请点击重试'}"></uni-load-more>
					<!-- 省市区选择 -->
					<uni-list v-if="world==0" :border="false">
						<uni-list-item v-for="(item,index) in currentList" :key="item.code" :title="item.name"
							:border="false" clickable @click="selectHandle(item,index)">
							<template v-slot:footer>
								<uni-icons
									v-if="activeItems[item.level] ? activeItems[item.level].code === item.code :false"
									type="checkmarkempty" class="sx-address-picker__list-tab--active"></uni-icons>
							</template>
						</uni-list-item>
					</uni-list>
					<!-- 国家地区列表选择 -->
					<uni-list v-else :border="false">
						<uni-list-item v-for="(item,index) in country.filter((v, i) => v.value !== 0)" :key="item.id"
							:title="item.name" :border="false" clickable @click="selectHandle(item, index, true)">
							<template v-slot:footer>
								<uni-icons v-if="countryName == item.name" type="checkmarkempty"
									class="sx-address-picker__list-tab--active"></uni-icons>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	const cityDataUrl =
		"https://static-mp-97eb3f65-f610-4509-81e4-a6cd5df3859b.next.bspapp.com/cos/data.json"
	const countryDataUrl =
		"https://static-mp-97eb3f65-f610-4509-81e4-a6cd5df3859b.next.bspapp.com/cos/country.json"
	export default {
		props: {
			value: Boolean,
			selected: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				keyword:'',// 搜索
				world: '0',
				loading: true,
				loadingStatus: 'loading',
				countryName: '',
				country: [],
				worlds: ['中国内地（大陆）', '港澳台地区及海外'],
				quickIndex: '0',
				list: [],
				activeLevel: -1,
				activeIndex: -1,
				activeItems: [],
				childList: []
			}
		},
		methods: {
			// 搜索
			changeSearch(value){
				if(value){
					if(this.activeLevel==-1){
						this.list = this.copyActiveItems.filter(item=>item.name.includes(value))
					}else{
						this.activeItems[this.activeLevel].children = this.copyActiveItems[this.activeLevel].children.filter(item=>item.name.includes(value))
					}
				}else{
					if(this.activeLevel==-1){
						this.list = [...this.copyActiveItems]
					}else{
						this.activeItems[this.activeLevel].children = JSON.parse(JSON.stringify(this.copyActiveItems[this.activeLevel].children))
					}
					
				}
				
			},
			// 弹窗是否显示状态事件
			popChange(e) {
				const status = e.show
				// pref: 选择省市区未选择完毕重置
				if (this.world == 0 && this.activeLevel !== 3 && !status) {
					setTimeout(()=>{
						this.activeLevel = -1
						this.activeIndex = -1
						this.activeItems = []
					},500)
				}
				this.$emit('input', status)
			},
			// 已选择项切换事件
			selectLevel(item) {
				if (item.code && this.world === '0') {
					this.activeLevel = item.level - 1
					this.activeItems = this.activeItems.filter((i) => {
						if (i.level < item.level + 1) {
							return item
						}
					})
				}
			},
			typeChange(e) {
				const value = e.detail.value
				this.world = value
				this.getList()
			},
			// 选择省市区/国家事件 isOhter区分选择省市区
			selectHandle(item, index, isOhter = false) {
				if (isOhter) {
					// 选择国家
					this.activeLevel = -1
					this.activeIndex = 0
					this.countryName = item.name;
					this.activeItems = [item]
					this.$refs.popup.close()
					this.$emit('confirm', this.activeItems)
				} else {
					// 选择省市区
					this.activeLevel = item.level
					this.activeIndex = index
					console.log(item.level,index,isOhter);
					this.$set(this.activeItems, item.level, item)
					this.activeItems.splice(item.level + 1)
					if (item.children) {
						this.$set(this.activeItems, item.level + 1, {})
					} else {
						this.$refs.popup.close()
						this.$emit('confirm', JSON.parse(JSON.stringify(this.activeItems)))
					}
				}
				this.copyActiveItems = JSON.parse(JSON.stringify(this.activeItems))
				this.keyword = ''
			},
			// 获取机构（获取中国省市区数据）
			getOrgList(){
				if (!this.list.length) {
					this.loadingStatus = 'loading'
					// 循环给省市区增加level级别字段
					const eachList = function(arr, level) {
						arr.forEach(v => {
							v.level = level
							if (v.children) {
								eachList(v.children, v.level + 1)
							}
						})
					}
					let req={
						identifyQr:uni.getStorageSync('scanData')?.identifyQr||'',
					}
					uni.$u.http.post('/wechat/applet/getOrgTreeForAppletQr', req).then(res => {
						console.log(res);
						if (res.code == 0 && res.data) {
							this.list = [res.data]
							eachList(this.list, 0)
							this.copyActiveItems = JSON.parse(JSON.stringify(this.list))
							this.loadingStatus = 'more'
						} else {
							this.list = []
							this.loadingStatus = 'noMore'
						}
					}).catch(err=>{
						this.loadingStatus = 'noMore'
					})
				}
				
			},
			// 获取中国省市区数据
			getCityData() {
				if (!this.list.length) {
					this.loadingStatus = 'loading'
					// 循环给省市区增加level级别字段
					const eachList = function(arr, level) {
						arr.forEach(v => {
							v.level = level
							if (v.children) {
								eachList(v.children, v.level + 1)
							}
						})
					}
					uni.request({
						url: cityDataUrl,
						success: res => {
							const list = res.data
							console.log('获取中国省市区数据',list);
							if (Array.isArray(list)) {
								eachList(list, 0)
								this.list = list;
								this.copyActiveItems = JSON.parse(JSON.stringify(list))
								// 回显
								// if (this.selected.length) {
								// 	const activeItems = [];
								// 	if (this.selected.length !== 1) {
								// 		activeItems[0] = this.list.find(v => v.name === this.selected[1])
								// 		activeItems[1] = activeItems[0].children.find(v => v.name === this
								// 			.selected[2])
								// 		activeItems[2] = activeItems[1].children.find(v => v.name === this
								// 			.selected[3])
								// 		activeItems[3] = activeItems[2].children.find(v => v.name === this
								// 			.selected[4])
								// 		this.activeItems = activeItems
								// 		this.activeLevel = 2
								// 		this.copyActiveItems = JSON.parse(JSON.stringify(activeItems))
								// 	} else {
								// 		this.activeLevel = -1
								// 	}
								// }
								this.loadingStatus = 'more'
							} else {
								this.loadingStatus = 'noMore'
							}
						},
						fail: () => {
							this.loadingStatus = 'noMore'
						}
					})
				} else {
					this.loadingStatus = 'more'
				}
			},
			// 获取国家数据
			getCountryData() {
				if (this.world == 1 && !this.country.length) {
					this.loadingStatus = 'loading'
					uni.request({
						url: countryDataUrl,
						success: res => {
							const data = res.data
							if (data.others) {
								const list = data.others.reduce((arr, v) => {
									arr.push(...v.items)
									return arr
								}, [])
								this.country = list;
								if (this.selected.length) {
									const item = list.find(v => this.selected[0] === v.name)
									this.activeItems = [item]
								}
								this.loadingStatus = 'more'
							} else {
								this.loadingStatus = 'noMore'
							}
						},
						fail: () => {
							this.loadingStatus = 'noMore'
						}
					})
				} else {
					this.loadingStatus = 'more'
				}
			},
			reGetList() {
				if (this.loadingStatus === 'noMore') {
					this.getList()
				}
			},
			getList() {
				switch (this.world) {
					case '0':
						// this.getCityData()
						// 获取机构
						this.getOrgList()
						break;
					// case '1':
					// 	this.getCountryData()
					// 	break;
				}
			}
		},
		computed: {
			// 动态计算当前要选择的列表
			currentList() {
				if (this.activeLevel !== -1) {
					return this.activeItems[this.activeLevel].children
				}
				return this.list
			},
			// 动态标题显示
			selectTitle() {
				const titles = {
					'-1': '请选择省份/地区',
					0: '请选择城市',
					1: '请选择区/县',
					2: '请选择街道',
				}
				return titles[this.activeLevel]
			},
			// TODO 后续更新
			// quickTitle() {
			// 	const items = {
			// 		0: '常用城市',
			// 		1: '常用国家/地区'
			// 	}
			// 	return items[this.world]
			// },
			// TODO 后续计划 常用选项
			// quickList() {
			// 	return this.world === '0' ? quickCitys : quickCountys
			// }
		},
		watch: {
			// 监听value触发弹窗显示状态以及事件处理
			async value(val) {
				if (val) {
					this.$refs.popup.open()
					const countyName = this.selected[0]
					this.world = this.selected.length === 1 ? '1' : '0'
					if (this.activeItems.length === 4) {
						this.activeLevel = 2
					}
					this.countryName = countyName
					this.getList()
				} else {
					this.$refs.popup.close()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sx-address-picker {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background-color: white;
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 16px;
		font-size: 14px;
		height: 1100rpx;
		display: flex;flex-direction: column;
		padding-bottom: 100rpx;
		&__close {
			text-align: right;
			margin-right: 80rpx;
			margin-top: 0px;
			position: absolute;
			left: 0;
			right: 0;
			color: #888;
		}

		&__title {
			text-align: center;
			font-weight: 500;
			font-size: 14px;
			margin-bottom: 20px;
		}

		&__select {
			&--active {
				color: $uni-color-primary;
			}
		}

		&--divider {
			border-top: 0.5px solid #ddd;
		}

		&__list {
			height: 100%;
			overflow-y: auto;
			&-tab {
				display: flex;
				margin-bottom: 20px;
				justify-content: space-between;
				padding-left: 16px;
				padding-right: 16px;

				&--hide {
					display: none;
				}

				&--active {
					color: $uni-color-primary !important;
				}
			}

			&-title {
				font-weight: bold;
			}

			.uni-load-more {
				padding: 100px 0;
			}
		}
	}
</style>